<template>
  <div>
    <table class="table1 owntable mb20 tableLayout" border="0" cellspacing="0" cellpadding="1" width="100%">
      <tr>
        <td width="150">产品清洁管理编号</td>
        <td>{{ currentItem.number }}</td>
        <td width="150">清洁类别</td>
        <td>{{ currentItem.cleanType==0?'原材料':currentItem.cleanType==1?'中间品':'成品' }}</td>
      </tr>
      <tr>
        <td>{{currentItem.cleanType==0?'原材料批号':'生产批号'}}</td>
        <td>{{ currentItem.batchNumber }}</td>
        <td>管理部门</td>
        <td>{{ currentItem.manageDeptName }}</td>
      </tr>
      <tr>
        <td>负责人</td>
        <td>{{ currentItem.manageUserName }}</td>
        <td>编制部门</td>
        <td>{{ currentItem.createDeptName }}</td>
      </tr>
    </table>

    <div class="mb20"> {{currentItem.cleanType==0?'原材料信息如下：':currentItem.cleanType==1?'中间品信息如下：':'成品信息如下：'}}</div>

    <div v-for="(v, index) in currentItem.cleanList" :key="index">
      <table class="table1 owntable mb20 tableLayout" border="0" cellspacing="0" cellpadding="1" width="100%">
        <tr>
          <td width="150">{{ currentItem.cleanType==0?'原材料名称':currentItem.cleanType==1?'中间品名称':'产品名称' }}</td>
          <td>{{ v.productName || v.middleName }}</td>
          <td width="150">{{ currentItem.cleanType==0?'原材料规格':currentItem.cleanType==1?'中间品规格':'产品规格' }}</td>
          <td>{{ v.productSku || v.middleSku }}</td>
        </tr>
        <tr>
          <td>{{ currentItem.cleanType==0?'原材料编号':currentItem.cleanType==1?'中间品编号':'产品代码' }}</td>
          <td>{{ v.productCode ||v.middleNumber }}</td>
         <td>数量</td>
         <td>{{ v.qty }} {{v.unit}}</td>
        </tr>
        <tr>
          <td>是否使用设备</td>
          <td colspan="3">
            <span>{{ v.deviceList && v.deviceList.length != 0 ? '是' : '否' }}</span>
            <el-button class="f12 ml10" type="text" @click="v.showmore = !v.showmore" v-if="v.deviceList && v.deviceList.length>3">
              {{ v.showmore ? '收起设备详情' : '展开设备详情' }}
              <i :class="{ 'el-icon-arrow-down': !v.showmore, 'el-icon-arrow-up': v.showmore }"></i>
            </el-button>
          </td>
        </tr>
      </table>
      <table class="table1 owntable mb20 deviceCon tableLayout" border="0" cellspacing="0" cellpadding="1" width="100%" v-if="v.showmore">
        <tr>
          <td>设备名称</td>
          <td>设备型号</td>
          <td>设备编号</td>
        </tr>
        <tr v-for="(m, i) in v.deviceList" :key="i">
          <td>{{ m.deviceName }}</td>
          <td>{{ m.deviceModel }}</td>
          <td>{{ m.deviceNumber }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    item: {}
  },
  data(){
    return {
      currentItem:{}
    }
  },
  watch:{
    item:{
      handler(newval){
          let currentItem=newval;
          if(currentItem.purchaseType==0){
            currentItem.cleanList.forEach(item=>{
               if(item.deviceList){
                 if(item.deviceList.length<=3){
                   item.showmore=true;
                 }else{
                   item.showmore=false;
                 }
               }
             })
          }
          this.currentItem=currentItem;
          console.log(this.currentItem)
          this.$forceUpdate()

      },
      deep:true,
      immediate:true
    }
  }
};
</script>

<style scoped lang="scss">
.deviceCon {
  tr,
  td {
    background: #d9e5f0 !important;
  }
}
</style>
